<template>
	<view :class="['cmt-box', isTextarea ? '' : 'hide']">
		<textarea fixed="true" show-confirm-bar="false" cursor-spacing="100px" :value="textArea" @input='getTextarea' placeholder='说点什么吧……'></textarea>
		<view class='hand'>
		    <navigator url='../../pages/selectopic/index' hover-class='none'>#话题</navigator>
		    <button @click='submit'>发送</button>
		</view>
	</view>
</template>

<script>
	import app from '../../common/index.js'
	export default {
		name: 'comt-box',
		props: ['isTextarea', 'comType', 'zxId', 'plId', 'bhfId'],
		data() {
			return {
				userInfo: {},
				isTextarea: true,
				content: '',  // 提交的输入框内容
				tpids: '',  // 选中的话题 
				textArea: '',  // 评论框输入内容
				i: null,  // 话题名称后的第一个光标位置
				comType: ''  ,// 类型 回复/评论
				zxId: '',  //  咨询ID
				plId: '',  // 评论ID
				bhfId: '',  // 被回复ID
			}
		},
		onLoad() {
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			if(!this.userInfo.id) {
				this.isLogin = true;
			}
		},
		/**
		 * @des 监听页面显示
		 */
		onShow: function () {
			let gb = this.$store.state.topic, tmpArr=[], tpid = '', tpname = '';
			for(let k in gb) {
				tmpArr.push(gb[k]);
			}
			tmpArr.forEach(function(item, index) {
			  tpid += `${item.tpid}${tmpArr.length-1 <= index ? '' : ','}`;
			  tpname += `#${item.tpname} `;
			})
			this.tpids = gb ? tpid : '';
			this.textArea = gb ? tpname+this.content : '';
			this.i = tpname.length;
		},
		methods: {
			// 获取输入内容
			getTextarea(e) {
				console.log(e)
			    let d = e.detail, c = '';
			    if(!!this.tpids) {
					if(d.cursor < this.i) {
						this.i = d.cursor;
					}
					c = d.value.substr(this.i);
			    }else {
					c = d.value;
			    }
				this.content = c;
			},
			// 提交评论
			submit() {
				console.log(this.comType)
			    let reqUrl, params;
			    if(this.comType === 'comt') {
			      console.log('评论。。。。。。。。。。。。。。。')
				  reqUrl = 'entry/wxapp/ZxPl';
				  params = {
				    zx_id: this.zxId,
				    user_id: this.userInfo.id,
				    ht_id: this.tpids,
				    content: this.content
				  }
			    } else if (this.comType === 'reply') {
			      console.log('回复。。。。。。。。。。。。。。。')
			      reqUrl = 'entry/wxapp/ZxHf';
			      params = {
			        zx_id: this.zxId,
			        pl_id: this.plId,
			        bhf_id: this.bhfId,
			        hf_id: this.userInfo.id,
			        ht_id: this.tpids,
			        reply: this.content
			      };
			    }
			    
			    // 关闭输入框并清除输入框数据
				this.$emit("isText", false);
			    this.isTextarea = false;
			    this.textArea = '';
			    this.content = '';
			    this.tpids = '';
			    this.i = null;
			    this.$store.commit('setTopic', null);
				console.log(params)
			    app.request({
					url: reqUrl,
					data: params
			    }, (ret) => {
					console.log(ret)
					let d = ret.data;
					uni.showToast({
						title: d.msg || '评论成功~',
						success: () => {
							this.$emit('refresh');
						}
					})
			    })
			},
		}
	}
</script>

<style>
	.cmt-box {position: fixed; left: 0; right: 0; bottom: 0; padding: 30upx; background-color: #f4f4f4; vertical-align: middle; z-index: 999;}
	.cmt-box textarea {width: 82%; height: 180upx; padding: 10upx 20upx; border: 1px solid #eee; border-radius: 3px; text-align: left; background-color: #fff;}
	.cmt-box textarea, .cmt-box .hand {display: inline-block; box-sizing: border-box;}
	.cmt-box .hand {width: 18%; padding-left: 20upx;}
	.cmt-box .hand navigator, .cmt-box .hand button {font-size: 30upx;}
	.cmt-box .hand navigator {color: #0093dd;}
	.cmt-box .hand button {margin: 16upx 0; padding: 16upx 0; line-height: 1; background-color: #0093dd; color: #fff;}
</style>
